import { IRouteComponentProps } from "@umijs/renderer-react"
import React, { useEffect, useState } from "react";
import { observer } from "mobx-react-lite"
import useStore from "@/context/useStore"
import styles from "./AnswerDetailManage.less"
import { getAnswerShield, getDeleteShield, getSyptAnswer, getSyptAnswerList } from "@/services/modules/AnswerDetailManage";
import { IItem, IQueryItem, ISyptAnswerList, } from "@/utils/AnswerDetailManage";
import { Button, Pagination, Switch, Alert, message, Modal } from 'antd';
import Editor from 'for-editor';
import { getanswerQuality, getdeleteQuality } from "@/services/modules/questionHandle";
import { addAnswerList } from "@/services/modules/question";
import ModalsBox from "@/components/modals"
const AnswerDetailManage: React.FC<IRouteComponentProps> = ({ location }) => {
    let answerId = location.query.answerId
    let [SyptAnswer, setSyptAnswer] = useState<IItem>({} as IItem)

    //点击显示输入框
    let [showBox, setShowBox] = useState<boolean>(false)
    //INPUT    
    let [title, setTitle] = useState("")

    let queryParams: IQueryItem = { answerId: answerId, status: "0", isScort: "1", pageNum: 1, pageSize: 10 }

    //分页
    let [pageNum, setPageNum] = useState(1)
    //评论列表
    let [SyptAnswerLists, setSyptAnswerLists] = useState<ISyptAnswerList[]>([])
    //评论列表长度
    let [SyptAnswerListLen, setSyptAnswerListLen] = useState(0)
    useEffect(() => {
        //问题回显
        getSyptAnswer(answerId).then(res => {
            setSyptAnswer(res.data)
        })
        if (status) {
            queryParams = { ...queryParams, answerId: answerId, status: "0", isScort: "1", pageNum: pageNum, pageSize: 10 }
        } else {
            queryParams = { ...queryParams, answerId: answerId, status: "0", isScort: "1", pageNum: pageNum, pageSize: 10 }
        }
        getSyptAnswerList(queryParams).then(res => {
            setSyptAnswerLists(res.rows)
            setSyptAnswerListLen(res.total)
        })
    }, [pageNum])


    //精品按钮提示
    const successBoutique = () => {
        message.success(<Alert message="设置精品成功" type="success" />);
    };
    const warningBoutique = () => {
        message.warning(<Alert message="取消精品成功" type="warning" />);
    };
    //使用数组渲染  //问题回显
    let SyptAnswerList = []
    SyptAnswerList.push(SyptAnswer)
    //选择其它有“正确答案”的类似问题
    const [isModalVisible3, setIsModalVisible3] = useState(false);
    const showModal3 = () => {
        setIsModalVisible3(true);
    }
    const handleOk3 = () => {
        setIsModalVisible3(false);
    };
    const handleCancel3 = () => {
        setIsModalVisible3(false);
    };
    return (
        <div className={styles.mainBox}>
            <div className={styles.main}>
                <div className={styles.main_title}>
                    问答 / 问答详情
                </div>
                <div className={styles.main_con}>
                    <div className={styles.mainCon_top}>
                        {//问题回显
                            SyptAnswerList.map((item, index) => {
                                return <div key={index} className={styles.mainConItem}>
                                    <div className={styles.mainConItemTitle}>
                                        <span>{item.quality ? <img src="http://111.203.59.61:8060/static/img/boutique.fc46be52.svg" alt="" /> : ""}</span>
                                        <span>{item.questionTitle}</span>
                                    </div>
                                    <div className={styles.userName}>
                                        <img src="http://111.203.59.61:8060/file_service/group1/M00/00/1B/rBsCHGC8sMqAB2cDAAC8MQ3506s51.jpeg" alt="" />
                                        <span>{item.userName}</span>
                                        <span>发布于{item.pushTime}</span>
                                    </div>
                                    <div className={styles.mainConItemContext}>{item.questionContent}</div>
                                    <div className={styles.mainConItemContext}>
                                        {
                                            item.labels && item.labels.map((item1, index1) => {
                                                return <span key={index1}>{item1}</span>
                                            })
                                        }
                                    </div>
                                    <div className={styles.mainConBtn}>
                                        <Button type="primary" onClick={() => { setShowBox(true) }}>回答</Button>
                                        <Button type="primary" onClick={showModal3}>批量选择相似问题答案</Button>
                                        <Modal title="选择其它有“正确答案”的类似问题"
                                            visible={isModalVisible3} onOk={handleOk3} onCancel={handleCancel3}
                                            bodyStyle={{ width: 1000 }}
                                            width={1000}
                                        >
                                            <ModalsBox />
                                        </Modal>
                                        <Button type="primary"
                                            style={{ border: "1px solid rgb(255, 141, 65)", color: "rgb(255, 141, 65)", background: "#fff" }}
                                            onClick={() => {
                                                if (item.quality == 1) {
                                                    //设置取消
                                                    getdeleteQuality(item.answerId)
                                                    getSyptAnswer(answerId).then(res => {
                                                        setSyptAnswer(res.data)
                                                    })
                                                    warningBoutique();

                                                } else {
                                                    //设置精品
                                                    getanswerQuality(item.answerId)
                                                    getSyptAnswer(answerId).then(res => {
                                                        setSyptAnswer(res.data)
                                                    })
                                                    successBoutique();

                                                }
                                            }}>{item.quality ? "取消精品" : "设置精品"}</Button>
                                    </div>
                                </div>

                            })
                        }
                    </div>
                    {
                        showBox ? <div className={styles.conCenter} >
                            <Editor placeholder="开始编辑..."
                                value={title}
                                style={{ height: 300 }}
                                onChange={(value) => { setTitle(value) }} />
                            <div className={styles.conCenterBtnBox}>
                                <Button type="primary" onClick={() => {
                                    addAnswerList({ answerId, questionValue: title }).then(res => {
                                        if (res.code === 200) {
                                            alert(res.msg)
                                            //更新 评论列表 评论数量 回答问题数据
                                            getSyptAnswerList(queryParams).then(res => {
                                                setSyptAnswerLists(res.rows)
                                                setSyptAnswerListLen(res.total)
                                            })
                                        }
                                        //清空输入框
                                        setTitle("")
                                        setShowBox(false)

                                    })
                                }}>发布</Button>
                            </div>
                        </div> : null
                    }

                    <div className={styles.conBotton}>
                        <h2>全部回答({SyptAnswerListLen})</h2>
                        {
                            SyptAnswerLists.map((item) => {
                                return <div key={item.replyId} className={styles.conBottonItem}>
                                    <div>
                                        <div>
                                            <img src="http://111.203.59.61:8060/file_service/group1/M00/00/1C/rBsCHWC9__CAPN22AAOTxkwoFYE394.jpg" alt="" />
                                            <span>{item.userName}</span>
                                            <span>发布于{item.replyDate}</span>
                                            <span><img src="http://111.203.59.61:8060/static/img/teacher_authentication.6b60f685.svg" alt="" /></span>

                                        </div>
                                        <div>
                                            <Button type="primary">撤销认证</Button>
                                            <Switch onChange={() => {
                                                if (item.shield) {
                                                    getDeleteShield(item.replyId)
                                                    alert("取消屏蔽")
                                                } else {
                                                    getAnswerShield(item.replyId)
                                                    alert("屏蔽成功")
                                                }
                                            }} checked={item.shield ? true : false} />
                                        </div>

                                    </div>
                                    <div>
                                        {item.replyContext}
                                    </div>
                                </div>
                            })
                        }
                        <div className={styles.page}>
                            <Pagination
                                defaultCurrent={1}
                                onChange={(e) => { setPageNum(e) }}
                                total={SyptAnswerListLen} size="default"
                                showSizeChanger showQuickJumper pageSize={10} pageSizeOptions={["10"]} />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default observer(AnswerDetailManage)
